<template>
  <div v-if="isVisible" class="modal-overlay" ref="modalRef">
    <div class="modal-content" :class="isMaximized ? 'w-full h-full' : 'w-11/12 max-w-6xl max-h-[90vh]'">
      <!-- 头部 -->
      <div class="bg-gray-800 text-white px-6 py-4 flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
          </svg>
          <h2 class="text-xl font-semibold">{{ getMediaTypeTitle() }}</h2>
        </div>
        <div class="flex items-center space-x-3">
          <!-- 最大化按钮 -->
          <button @click="toggleMaximize" class="text-white hover:text-gray-300 transition-colors">
            <svg v-if="!isMaximized" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
            </svg>
            <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
          <button @click="closePreview" class="text-white hover:text-gray-300 transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="flex" :class="isMaximized ? 'h-screen' : 'h-[calc(90vh-120px)]'">
        <!-- 左侧媒体预览 -->
        <div class="flex-1 p-6 bg-gray-100 flex items-center justify-center">
          <div class="w-full h-full flex items-center justify-center">
            <!-- 加载状态 -->
            <div v-if="loading" class="text-center">
              <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4"></div>
              <p class="text-gray-600">加载中...</p>
            </div>

            <!-- 错误状态 -->
            <div v-else-if="error" class="text-center">
              <svg class="w-16 h-16 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
              </svg>
              <p class="text-red-600 mb-2">加载失败</p>
              <p class="text-gray-500 text-sm">{{ error }}</p>
            </div>

            <!-- 图片预览 -->
            <div v-else-if="isImageFile" class="w-full h-full flex items-center justify-center">
              <img 
                :src="mediaUrl" 
                :alt="currentFile?.name"
                class="max-w-full max-h-full object-contain rounded-lg shadow-lg"
              />
            </div>

            <!-- 视频预览 -->
            <div v-else-if="isVideoFile" class="w-full h-full flex items-center justify-center">
              <!-- 4K视频优化预览 -->
              <div v-if="isLargeVideo && !showFullVideo" class="text-center">
                <div class="mb-4">
                  <video 
                    v-if="videoPreviewData"
                    :src="`data:video/mp4;base64,${videoPreviewData}`"
                    controls
                    autoplay
                    loop
                    muted
                    class="max-w-full max-h-64 rounded-lg shadow-lg"
                  >
                    您的浏览器不支持视频播放
                  </video>
                  <div v-else-if="loadingVideoPreview" class="flex items-center justify-center h-64 bg-gray-100 rounded-lg">
                    <div class="text-center">
                      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
                      <p class="text-gray-600">正在生成720p预览...</p>
                    </div>
                  </div>
                  <div v-else class="flex items-center justify-center h-64 bg-gray-100 rounded-lg">
                    <div class="text-center">
                      <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                      </svg>
                      <p class="text-gray-600">大视频文件</p>
                      <p class="text-sm text-gray-500">文件大小: {{ formatFileSize(currentFile?.size || 0) }}</p>
                      <p class="text-xs text-gray-400 mt-2">预览功能需要FFmpeg支持</p>
                    </div>
                  </div>
                </div>
                <div class="space-y-2">
                  <p class="text-sm text-gray-600">这是一个大视频文件</p>
                  <button 
                    @click="showFullVideo = true"
                    class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
                  >
                    播放原始视频
                  </button>
                </div>
              </div>
              
              <!-- 普通视频或用户选择播放原始视频 -->
              <video 
                v-else
                :src="mediaUrl" 
                controls
                class="max-w-full max-h-full rounded-lg shadow-lg"
              >
                您的浏览器不支持视频播放
              </video>
            </div>

            <!-- 音频预览 -->
            <div v-else-if="isAudioFile" class="w-full h-full flex items-center justify-center">
              <div class="text-center">
                <div class="w-32 h-32 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center mb-4 mx-auto">
                  <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
                  </svg>
                </div>
                <audio 
                  :src="mediaUrl" 
                  controls
                  class="w-full max-w-md"
                >
                  您的浏览器不支持音频播放
                </audio>
              </div>
            </div>

            <!-- 默认文件图标 -->
            <div v-else class="text-center">
              <div class="w-32 h-32 bg-gray-200 rounded-full flex items-center justify-center mb-4 mx-auto">
                <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
              </div>
              <p class="text-gray-500">不支持的文件类型</p>
            </div>
          </div>
        </div>

        <!-- 右侧信息面板 -->
        <div class="w-80 bg-white border-l border-gray-200 p-6 overflow-y-auto">
          <!-- 文件信息 -->
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">文件信息</h3>
            <div class="space-y-3">
              <div>
                <label class="block text-sm font-medium text-gray-600">文件名</label>
                <p class="text-sm text-gray-900 font-mono break-all">{{ currentFile?.name }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-600">路径</label>
                <p class="text-sm text-gray-900 font-mono break-all">{{ currentFile?.path }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-600">大小</label>
                <p class="text-sm text-gray-900">{{ formatFileSize(currentFile?.size || 0) }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-600">修改时间</label>
                <p class="text-sm text-gray-900">{{ formatDate(currentFile?.modified) }}</p>
              </div>
            </div>
          </div>

          <!-- 组导航 -->
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">组内导航</h3>
            <div class="flex items-center justify-between mb-3">
              <span class="text-sm text-gray-600">
                {{ currentFileIndex + 1 }} / {{ currentGroup?.files.length }}
              </span>
              <div class="flex space-x-2">
                <button 
                  @click="previousFile"
                  :disabled="currentFileIndex === 0"
                  class="p-2 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 disabled:cursor-not-allowed rounded transition-colors"
                >
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                  </svg>
                </button>
                <button 
                  @click="nextFile"
                  :disabled="currentGroup?.files.length === 0 || currentFileIndex === (currentGroup?.files.length || 0) - 1"
                  class="p-2 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 disabled:cursor-not-allowed rounded transition-colors"
                >
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>

          <!-- 缩略图列表 -->
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">组内文件</h3>
            <div class="space-y-2 max-h-48 overflow-y-auto">
              <div 
                v-for="(file, index) in currentGroup?.files" 
                :key="index"
                @click="selectFile(index)"
                :class="[
                  'p-2 rounded cursor-pointer transition-colors',
                  index === currentFileIndex 
                    ? 'bg-blue-100 border border-blue-300' 
                    : 'bg-gray-50 hover:bg-gray-100'
                ]"
              >
                <div class="flex items-center space-x-2">
                  <div class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center flex-shrink-0">
                    <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 truncate">{{ file.name }}</p>
                    <p class="text-xs text-gray-500">{{ formatFileSize(file.size) }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 图片专用选项 -->
          <div v-if="isImageFile" class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">图片选项</h3>
            <div class="space-y-3">
              <p class="text-sm text-gray-600">图片预览模式</p>
            </div>
          </div>

          <!-- 底部操作 -->
          <div class="border-t pt-4">
            <div class="flex space-x-2">
              <button 
                @click="toggleSelection"
                :class="[
                  'flex-1 px-4 py-2 rounded font-medium transition-colors',
                  currentFile?.selected
                    ? 'bg-red-500 hover:bg-red-600 text-white'
                    : 'bg-green-500 hover:bg-green-600 text-white'
                ]"
              >
                {{ currentFile?.selected ? '取消选择' : '选择删除' }}
              </button>
              <button 
                @click="closePreview"
                class="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-700 rounded font-medium transition-colors"
              >
                关闭
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { convertFileSrc } from '@tauri-apps/api/tauri'
import { readBinaryFile } from '@tauri-apps/api/fs'

interface FileInfo {
  name: string
  path: string
  size: number
  modified: Date
  selected: boolean
}

interface DuplicateGroup {
  files: FileInfo[]
  size: number
}

interface Props {
  isVisible: boolean
  currentGroup?: DuplicateGroup
  currentFileIndex: number
}

// 定义emits
interface Emits {
  (e: 'close'): void
  (e: 'update-selection', fileIndex: number, selected: boolean): void
  (e: 'navigate-file', fileIndex: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 状态管理
const loading = ref(false)
const error = ref('')
const blobUrl = ref<string>('')
const isMaximized = ref(false)

// 视频预览相关状态
const videoPreviewData = ref<string>('')
const loadingVideoPreview = ref(false)
const showFullVideo = ref(false)

// 大视频文件阈值 (100MB)
const LARGE_VIDEO_THRESHOLD = 100 * 1024 * 1024

// 计算属性
const currentFile = computed(() => {
  return props.currentGroup?.files[props.currentFileIndex]
})

// 修复mediaUrl计算逻辑
const mediaUrl = computed(() => {
  if (!currentFile.value) return ''
  
  // 优先使用 blob URL
  if (blobUrl.value) {
    console.log('使用 blob URL:', blobUrl.value)
    return blobUrl.value
  }
  
  // 如果没有 blob URL 且正在加载，返回空字符串
  if (loading.value) {
    console.log('正在加载中，等待 blob URL...')
    return ''
  }
  
  // 如果加载失败且有错误，也不返回 URL
  if (error.value) {
    console.log('加载失败，不返回 URL')
    return ''
  }
  
  // 对于图片文件，尝试使用 convertFileSrc，但避免 asset.localhost 错误
  if (isImageFile.value) {
    try {
      const convertedUrl = convertFileSrc(currentFile.value.path)
      // 检查是否是 asset.localhost 路径，如果是则返回空字符串
      if (convertedUrl.includes('asset.localhost')) {
        console.log('检测到 asset.localhost 路径，等待 blob URL 加载')
        return ''
      }
      console.log('使用 convertFileSrc URL:', convertedUrl)
      return convertedUrl
    } catch (error) {
      console.error('转换文件路径失败:', error)
      return ''
    }
  }
  
  // 对于其他文件类型，尝试使用 convertFileSrc
  try {
    const convertedUrl = convertFileSrc(currentFile.value.path)
    console.log('使用 convertFileSrc URL:', convertedUrl)
    return convertedUrl
  } catch (error) {
    console.error('转换文件路径失败:', error)
    return ''
  }
})

const isImageFile = computed(() => {
  if (!currentFile.value) return false
  const ext = currentFile.value.name.toLowerCase().split('.').pop()
  return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext || '')
})

const isVideoFile = computed(() => {
  if (!currentFile.value) return false
  const ext = currentFile.value.name.toLowerCase().split('.').pop()
  return ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(ext || '')
})

const isAudioFile = computed(() => {
  if (!currentFile.value) return false
  const ext = currentFile.value.name.toLowerCase().split('.').pop()
  return ['mp3', 'wav', 'flac', 'aac', 'ogg', 'wma'].includes(ext || '')
})

const isLargeVideo = computed(() => {
  if (!currentFile.value || !isVideoFile.value) return false
  return currentFile.value.size > LARGE_VIDEO_THRESHOLD
})

// 方法
const closePreview = () => {
  emit('close')
}

const getMediaTypeTitle = () => {
  if (isImageFile.value) return '图片预览'
  if (isVideoFile.value) return '视频预览'
  if (isAudioFile.value) return '音频预览'
  return '文件预览'
}

const previousFile = () => {
  if (props.currentFileIndex > 0) {
    emit('navigate-file', props.currentFileIndex - 1)
  }
}

const nextFile = () => {
  if (props.currentGroup && props.currentFileIndex < props.currentGroup.files.length - 1) {
    emit('navigate-file', props.currentFileIndex + 1)
  }
}

const selectFile = (index: number) => {
  if (index >= 0 && index < (props.currentGroup?.files.length || 0)) {
    emit('navigate-file', index)
  }
}

const toggleSelection = () => {
  if (currentFile.value) {
    emit('update-selection', props.currentFileIndex, !currentFile.value.selected)
  }
}

// 最大化/最小化
const toggleMaximize = () => {
  isMaximized.value = !isMaximized.value
  if (isMaximized.value) {
    // 最大化时，调整弹窗大小
    const modal = modalRef.value
    if (modal) {
      modal.style.position = 'fixed'
      modal.style.top = '0px'
      modal.style.left = '0px'
      modal.style.width = '100vw'
      modal.style.height = '100vh'
      modal.style.zIndex = '9999'

      const content = modal.querySelector('.modal-content') as HTMLElement
      if (content) {
        content.style.position = 'absolute'
        content.style.top = '0px'
        content.style.left = '0px'
        content.style.width = '100%'
        content.style.height = '100%'
        content.style.transform = 'none'
      }
    }
  } else {
    // 最小化时，恢复弹窗大小
    positionModal()
  }
}

// 工具函数
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDate = (date: Date | undefined): string => {
  if (!date) return '未知'
  return date.toLocaleDateString('zh-CN')
}

// 弹窗定位管理
const modalRef = ref<HTMLElement | null>(null)

// 动态定位弹窗
const positionModal = () => {
  if (modalRef.value) {
    const modal = modalRef.value
    // 强制设置弹窗位置
    modal.style.position = 'fixed'
    modal.style.top = '0px'
    modal.style.left = '0px'
    modal.style.width = '100vw'
    modal.style.height = '100vh'
    modal.style.zIndex = '9999'
    
    // 确保弹窗内容居中
    const content = modal.querySelector('.modal-content') as HTMLElement
    if (content) {
      content.style.position = 'absolute'
      content.style.top = '50%'
      content.style.left = '50%'
      content.style.transform = 'translate(-50%, -50%)'
    }
  }
}

// 监听窗口变化
const handleResize = () => {
  positionModal()
}

// 监听弹窗显示状态
watch(() => props.isVisible, (newValue) => {
  if (newValue) {
    nextTick(() => {
      positionModal()
      // 当弹窗显示时，先设置加载状态，然后加载文件内容
      loading.value = true
      error.value = ''
      isMaximized.value = false
      loadFileContent()
    })
  } else {
    // 弹窗关闭时重置所有状态
    loading.value = false
    error.value = ''
    isMaximized.value = false
    if (blobUrl.value) {
      URL.revokeObjectURL(blobUrl.value)
      blobUrl.value = ''
    }
  }
})

// 改进loadFileContent函数，确保图片文件能正确加载
const loadFileContent = async () => {
  if (!currentFile.value) return

  try {
    // 清理之前的 blob URL
    if (blobUrl.value) {
      URL.revokeObjectURL(blobUrl.value)
      blobUrl.value = ''
    }

    loading.value = true
    error.value = ''

    // 对于大文件，显示警告并尝试优化加载
    if (currentFile.value.size > 50 * 1024 * 1024) { // 50MB
      console.log('大文件加载:', currentFile.value.name, formatFileSize(currentFile.value.size))
    }

    // 使用 Tauri 的 readBinaryFile 读取文件
    const fileData = await readBinaryFile(currentFile.value.path)
    
    // 根据文件类型设置正确的 MIME 类型
    let mimeType = 'application/octet-stream'
    if (isImageFile.value) {
      const ext = currentFile.value.name.toLowerCase().split('.').pop()
      const mimeTypes: Record<string, string> = {
        'jpg': 'image/jpeg',
        'jpeg': 'image/jpeg',
        'png': 'image/png',
        'gif': 'image/gif',
        'webp': 'image/webp',
        'bmp': 'image/bmp',
        'svg': 'image/svg+xml'
      }
      mimeType = mimeTypes[ext || ''] || 'image/jpeg'
    } else if (isVideoFile.value) {
      const ext = currentFile.value.name.toLowerCase().split('.').pop()
      const videoTypes: Record<string, string> = {
        'mp4': 'video/mp4',
        'webm': 'video/webm',
        'ogg': 'video/ogg',
        'avi': 'video/x-msvideo',
        'mov': 'video/quicktime',
        'wmv': 'video/x-ms-wmv'
      }
      mimeType = videoTypes[ext || ''] || 'video/mp4'
    } else if (isAudioFile.value) {
      const ext = currentFile.value.name.toLowerCase().split('.').pop()
      const audioTypes: Record<string, string> = {
        'mp3': 'audio/mpeg',
        'wav': 'audio/wav',
        'ogg': 'audio/ogg',
        'flac': 'audio/flac',
        'aac': 'audio/aac'
      }
      mimeType = audioTypes[ext || ''] || 'audio/mpeg'
    }

    const blob = new Blob([fileData], { type: mimeType })
    blobUrl.value = URL.createObjectURL(blob)

    console.log('成功创建 blob URL:', blobUrl.value, 'MIME类型:', mimeType)
    loading.value = false
  } catch (err) {
    console.error('读取文件失败:', err)
    error.value = '无法读取文件内容'
    loading.value = false
  }
}

// 生成视频预览（简化版本）
// const generateVideoPreview = async () => {
//   if (!currentFile.value || !isVideoFile.value) return
  
//   loadingVideoPreview.value = true
  
//   try {
//     // 尝试调用后端生成预览
//     await invoke<string>('generate_video_preview', {
//       filePath: currentFile.value.path
//     })
    
//     console.log('视频预览请求已发送')
    
//   } catch (error) {
//     console.log('视频预览功能暂不可用:', error)
//     // 直接显示原视频
//     showFullVideo.value = true
//   } finally {
//     loadingVideoPreview.value = false
//   }
// }

// 监听文件变化，重新加载内容
watch(() => props.currentFileIndex, () => {
  // 先设置加载状态
  loading.value = true
  error.value = ''
  isMaximized.value = false // 切换文件时重置最大化状态
  
  // 重置视频预览状态
  videoPreviewData.value = ''
  showFullVideo.value = false
  loadingVideoPreview.value = false
  
  // 延迟加载，确保组件已更新
  nextTick(() => {
    loadFileContent()
    
    // 大视频文件不自动生成预览，等待用户操作
    // 这样可以避免在没有FFmpeg的环境中出错
  })
})

// 组件挂载时加载文件
onMounted(() => {
  window.addEventListener('resize', handleResize)
  // 如果弹窗已经可见，则加载文件内容
  if (props.isVisible) {
    nextTick(() => {
      loading.value = true
      error.value = ''
      loadFileContent()
    })
  }
})

// 组件卸载时清理 blob URL
onUnmounted(() => {
  if (blobUrl.value) {
    URL.revokeObjectURL(blobUrl.value)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
/* 自定义滚动条 */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>
